<template>
  <div class="chip-detail">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 芯片详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form :model="detailInfo" label-width="100" class="form">
          <el-form-item label="型号">
            {{ detailInfo.model }}
          </el-form-item>
          <el-form-item label="品牌">
            {{ detailInfo.producer }}
          </el-form-item>
          <el-form-item label="价值系数">
            {{ detailInfo.value }}
          </el-form-item>
          <el-form-item label="IC总库存">
            {{ detailInfo.icStock }}
          </el-form-item>
          <el-form-item label="IC总家数">
            {{ detailInfo.icBusiness }}
          </el-form-item>
          <el-form-item label="正能量价值">
            <!-- {{ detailInfo.Evalue }} -->
          </el-form-item>
          <el-form-item label="官网库存">
            {{ detailInfo.stock }}
          </el-form-item>
          <el-form-item label="官网日期">
            <!-- {{ detailInfo.date }} -->
          </el-form-item>
          <el-form-item label="第三方库存">
            {{ detailInfo.thirdPartyInventory }}
          </el-form-item>
        </el-form>
      </div>

      <div class="IC-change mb20">
        <h3>IC库存变化榜</h3>
        <div class="c-desc">
          描述：该芯片的库存变化最大的前10家公司，其中包含：5家库存增加最大的公司、5家库存减少最多的5家公司
        </div>
        <div class="date">
          <span>日期: </span>
          <el-select
            v-model="stockChangeDate"
            placeholder=""
            @change="changeDate('change')"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-table
          :data="changeData"
          border
          class="change-table"
          ref="multipleTable"
          :row-style="{ height: '10px' }"
          :cell-style="{ padding: '2px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="model2"
            label="型号"
            width="120"
          ></el-table-column>
          <el-table-column prop="company" label="公司"></el-table-column>
          <el-table-column prop="dc" label="年份"></el-table-column>
          <el-table-column prop="level" label="级别"></el-table-column>
          <el-table-column prop="rank" label="排名"></el-table-column>
          <el-table-column prop="currenttime" label="日期"></el-table-column>
          <el-table-column
            prop="stockchange"
            label="变化数量"
          ></el-table-column>
          <el-table-column label="详情">
            <template #default="scope">
              <span class="c409" @click="handleEdit(scope.$index, scope.row)"
                >详情</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="IC-stock mb20">
        <h3>IC库存榜</h3>
        <div class="c-desc">描述：该芯片库存前10的公司</div>
        <div class="date">
          <span>日期: </span>

          <el-select v-model="stockDate" placeholder="" @change="changeDate()">
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-table
          :data="stockList"
          border
          class="change-table"
          ref="multipleTable"
          :row-style="{ height: '10px' }"
          :cell-style="{ padding: '2px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="model2"
            label="型号"
            width="120"
          ></el-table-column>
          <el-table-column prop="company" label="公司"></el-table-column>
          <el-table-column prop="dc" label="年份"></el-table-column>
          <el-table-column prop="level" label="级别"></el-table-column>
          <el-table-column prop="rank" label="排名"></el-table-column>
          <el-table-column prop="currenttime" label="日期"></el-table-column>
          <el-table-column
            prop="stockchange"
            label="变化数量"
          ></el-table-column>
          <el-table-column label="详情">
            <template #default="scope">
              <span class="c409" @click="handleEdit(scope.$index, scope.row)"
                >详情</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="IC-chart mb20">
        <h3>芯片线性图表</h3>
        <div class="chart-line"></div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover">
              <schart
                class="schart"
                canvasId="line"
                :options="ICchangeChart"
              ></schart>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <schart canvasId="PE" class="schart" :options="PEchart"></schart>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <schart
                canvasId="otherStockChart"
                class="schart"
                :options="otherStockChart"
              ></schart>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover">
              <schart
                canvasId="PEchangeNumChart"
                class="schart"
                :options="PEchangeNumChart"
              ></schart>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

// import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import Schart from "vue-schart";

import {
  MockDetailInfo,
  ICchangeList,
  ICStockList,
  ICDate,
} from "../mock/chipDetail";
import {
  getIcTimes,
  getICChange10_2,
  getICStock10_2,
  getIc7chart,
  getZNL,
  getOtherStack,
} from "@/service/chipDetail/index";
import { createCurWeek } from "@/utils/chipDetail";

export default {
  name: "chipDetail",
  components: { Schart },

  setup() {
    const router = useRouter();
    const { model, info } = router.currentRoute.value.query;
    // 基本信息
    const detailInfo = ref({});
    // detailInfo.value = MockDetailInfo;
    detailInfo.value = info ? JSON.parse(info) : "";
    // console.log(JSON.parse(info), "ddd");
    // 获取ic最近7天时间
    const dateOptions = ref([
      {
        value: 1,
        label: "昨天",
      },
    ]);
    let timeList = [];
    dateOptions.value = ICDate.map((item, index) => {
      return {
        value: index,
        label: item,
      };
    });
    // 获取IC库存变化榜
    const changeData = ref([]);
    // 模拟数据
    changeData.value = ICchangeList;
    const stockChangeDate = ref(0);
    const getICChange = (params) => {
      getICChange10_2(params).then((res) => {
        changeData.value = res.data;
      });
    };
    // ic库存榜
    const stockList = ref([]);
    const stockDate = ref(0);

    // 模拟数据
    stockList.value = ICStockList;
    const getICStock = (params) => {
      getICStock10_2(params).then((res) => {
        stockList.value = res.data;
      });
    };

    // 切换日期
    const changeDate = (type) => {
      if (type) {
        getICChange({
          model,
          currenttime2: timeList[stockChangeDate.value],
        });
      } else {
        getICStock({
          model,
          currenttime2: timeList[stockDate.value],
        });
      }
    };

    // 折线图时间格式化;
    const dateFormate = (time) => {
      let curYear = time.slice(0, 4);
      let curDay = time.slice(4);
      return [curYear, curDay];
    };
    // 获取当前最近一周时间
    const curLabel = createCurWeek();
    // IC交易变化图
    const ICchangeChart = ref({});
    let ICchangeChartLabel = [];
    let ICBusNum = []; // 商家总数
    let ICBusStock = []; // 库存
    ICchangeChart.value = {
      type: "line",
      title: {
        text: `IC交易网变化图`,
      },
      labels: curLabel,
      datasets: [
        {
          label: "商家总数",
          data: [" "],
        },
        {
          label: "总库存",
          data: [" "],
        },
      ],
    };
    getIc7chart({
      model,
    }).then((res) => {
      console.log("IC交易网变化图", res.data);
      res.data.forEach((item) => {
        ICchangeChartLabel.push(String(item.currenttime).slice(4));
        ICBusNum.push(item.totalCompany);
        ICBusStock.push(item.totalStock);
      });

      ICchangeChart.value = {
        type: "line",
        title: {
          text: `IC交易网变化图`,
        },
        labels: ICchangeChartLabel,
        datasets: [
          {
            label: "商家总数",
            data: ICBusNum,
          },
          {
            label: "总库存",
            data: ICBusStock,
          },
        ],
      };
    });

    // 正能量价值排名变化图
    const PEchart = ref({});
    let PEchartLabel = [];
    let PERank = []; // 排名
    PEchart.value = {
      type: "line",
      title: {
        text: `正能量变化图`,
      },
      labels: curLabel,
      datasets: [
        {
          label: "价值排名",
          data: [" "],
        },
      ],
    };
    // 第三方总库存变化
    const otherStockChart = ref({});
    let OSlabel = [];
    let OStock = []; // 排名
    otherStockChart.value = {
      type: "line",
      title: {
        text: `第三方总库存变化`,
      },
      labels: curLabel,
      datasets: [
        {
          label: "库存",
          data: [" "],
        },
      ],
    };
    getOtherStack({
      model,
    }).then((res) => {
      res.data.forEach((item) => {
        OSlabel.push(String(item.currenttime).slice(4));
        OStock.push(item.thirdStock);
      });
      // createChart('IC交易网变化图', res, 1)
      otherStockChart.value = {
        type: "line",
        title: {
          text: `IC交易网变化图${curYear}`,
        },
        labels: OSlabel,
        datasets: [
          {
            label: "库存",
            data: OStock,
          },
        ],
      };
    });

    // 正能量家数变化图
    const PEchangeNumChart = ref({});
    let PEchangeLabel = [];
    let searhTimes = []; // 搜索次数
    let serchCompany = []; // 搜索公司
    PEchangeNumChart.value = {
      type: "line",
      title: {
        text: `正能量家数变化图`,
      },
      labels: curLabel,
      datasets: [
        {
          label: "搜索次数",
          data: [0],
        },
        {
          label: "搜索公司",
          data: [0],
        },
      ],
    };

    getZNL({
      model,
    }).then((res) => {
      res.data.map((item) => {
        // 正能量家数变化图
        const time = String(item.currenttime).slice(4);
        PENumchangeLabel.push(time);
        searhTimes.push(item.searchTimes30);
        serchCompany.push(item.searchCompany30);
        // 正能量变化图
        PEchartLabel.push(time);
        PERank.push(item.ranks);
      });
      PEchangeNumChart.value = {
        type: "line",
        title: {
          text: `正能量家数变化图`,
        },
        labels: PENumchangeLabel,
        datasets: [
          {
            label: "商家总数",
            data: searhTimes,
          },
          {
            label: "总库存",
            data: serchCompany,
          },
        ],
      };
      PEchart.value = {
        type: "line",
        title: {
          text: `正能量变化图`,
        },
        labels: PEchartLabel,
        datasets: [
          {
            label: "价值排名",
            data: PERank,
          },
        ],
      };
    });

    const _getIcTimes = async () => {
      await getIcTimes({ model }).then((res) => {
        timeList = res.data;
        dateOptions.value = timeList.map((item, index) => {
          return {
            value: index,
            label: item,
          };
        });
        getICChange({
          model,
          currenttime2: timeList[stockChangeDate.value],
        });
        getICStock({
          model,
          currenttime2: timeList[stockDate.value],
        });
      });
    };
    _getIcTimes();

    return {
      detailInfo,
      changeData,
      dateOptions,
      stockChangeDate,
      changeDate,
      stockDate,
      ICchangeChart,
      stockList,
      PEchart,
      otherStockChart,
      PEchangeNumChart,
    };
  },
};
</script>

<style scoped>
.c409 {
  color: #409eff;
}
.form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  width: 30%;
}
.mb20 {
  margin-bottom: 20px;
}
.c-desc {
  height: 30px;
  border-bottom: 1px solid #333;
  margin: 20px 0;
}
.date {
  float: right;
  margin-bottom: 20px;
}
.chart-line {
  /* height: 30px; */
  border-bottom: 1px solid #333;
  margin: 20px 0;
}
.schart {
  width: 100%;
  height: 300px;
}
</style>
